<template>
<div>
   <el-row>
  <el-col :span="16">
    <div class="" style="width: 100%;">
    <img src="../../assets/lmage/login3.png" alt="" style="width : 100%; height:99.5vh;">
    </div>
    </el-col>
    
  <el-col :span="8" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="" style="width: 500px; text-align: center;">
      <img src="../../assets/lmage/login2.png" alt="" style="width: 100px">
      <p style="color: #37474f; font-size: 35px; font-weight: 600; margin-top: -5px;">选课管理系统</p>

   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="40px" class="demo-ruleForm">
     <el-form-item prop="username">
       <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
      <el-form-item prop="password">
       <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
       <el-form-item>
      <el-checkbox v-model="checked">自动登录</el-checkbox>
      <el-link type="primary" style="margin-left: 30px;">忘记密码？</el-link>
   </el-form-item>
    <el-form-item>
    <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')" style="width: 100%">立即创建</el-button>
   </el-form-item>
  </el-form>
    </div>
    </el-col>
</el-row>
</div>
</template>

<script>
 export default {
    data() {
      return {
        ruleForm: {
          username: '2021120322401',
          password: '222222',
        },
         loading: false,
        checked: true,
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            
          ]
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(this.ruleForm.username);
          if (valid) {
            
            this.loading = true
          this.$store.dispatch('user/login', this.ruleForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
          } else {
           
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>


<style lang="scss"></style>

